<template>
  <main class="main-container" v-loading="pollingTaskStore.isLoading">
    <div class="search-container">
      <div style="display: flex">
        <el-text>保养项目名称：</el-text>
        <div style="margin-left: 10px">
          <el-select
            v-model="pollingTaskStore.currentProjectName"
            filterable
            clearable
            style="width: 240px"
            placeholder="请选择要检索的项目"
          >
            <el-option
              v-for="item in pollingTaskStore.projectNames"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
        <el-button style="margin-left: 10px" :icon="Refresh" circle></el-button>
        <el-text style="margin-left: 20px">部件名称：</el-text>
        <div style="margin-left: 10px">
          <el-select
            v-model="pollingTaskStore.currentPartName"
            filterable
            clearable
            style="width: 240px"
            placeholder="请选择要检索的项目"
          >
            <el-option
              v-for="item in pollingTaskStore.partNames"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
        <el-button style="margin-left: 10px" :icon="Refresh" circle></el-button>
      </div>
    </div>
    <div class="table-container">
      <div class="table-tools">
        <el-button
          :disabled="!pollingTaskStore.isValidPart"
          type="warning"
          :icon="CirclePlusFilled"
          @click="showAddItemDialog = true"
          >新增</el-button
        >
        <el-tooltip effect="dark" content="刷新" placement="top">
          <el-button :icon="Refresh">刷新任务列表</el-button>
        </el-tooltip>
      </div>
      <div class="table-content">
        <el-scrollbar style="margin-top: 10px">
          <el-table style="width: 100%" :data="pollingTaskStore.tasks">
            <el-table-column fixed prop="taskName" label="任务名称" />
            <el-table-column fixed prop="deviceName" label="设备名称" />
            <el-table-column fixed prop="address" label="地址" />
            <el-table-column prop="dataType" label="数据类型" />
            <el-table-column prop="interval" label="周期" />
            <el-table-column prop="enable" label="任务状态" />
            <el-table-column prop="published" label="发布状态" />
            <el-table-column fixed="right" label="操作" width="120">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="pollingTaskStore.deletePollingTaskAsync(scope.$index)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
    </div>
    <el-dialog
      v-model="showAddItemDialog"
      title="添加新的部件"
      width="400"
      :close-on-click-modal="false"
      draggable
    >
      <div>
        <el-text>任务名称：</el-text>
        <el-input
          v-model="taskName"
          style="margin-top: 4px"
          maxlength="20"
          type="text"
          placeholder=""
        ></el-input>
      </div>
      <div style="margin-top: 10px">
        <el-text>设备名称：</el-text>
        <el-select filterable clearable v-model="deviceName">
          <el-option
            v-for="item in pollingTaskStore.deviceNames"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
      <div style="margin-top: 10px">
        <el-text>地址：</el-text>
        <el-input v-model="address" style="margin-top: 4px" maxlength="20" type="text"></el-input>
      </div>
      <div style="margin-top: 10px">
        <el-text>数据类型：</el-text>
        <el-select filterable clearable v-model="dataType">
          <el-option v-for="item in dataTypes" :key="item" :label="item" :value="item" />
        </el-select>
      </div>
      <div style="margin-top: 10px">
        <el-text>扫描周期：</el-text>
        <el-input
          v-model="interval"
          style="margin-top: 4px"
          maxlength="20"
          type="number"
        ></el-input>
      </div>
      <div style="margin-top: 10px">
        <div style="float: left">
          <el-text>任务状态：</el-text>
          <el-switch v-model="enable" inline-prompt active-text="是" inactive-text="否" />
        </div>
        <div>
          <el-text style="padding-left: 10px">发布状态：</el-text>
          <el-switch v-model="published" inline-prompt active-text="是" inactive-text="否" />
        </div>
      </div>
      <div style="display: flex; justify-content: center; margin-top: 20px">
        <el-button type="primary" @click="onAddPollingTask">添加</el-button>
      </div>
    </el-dialog>
  </main>
</template>

<script setup lang="ts">
import { Search, Refresh, CirclePlusFilled } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import { useDeviceMaintenancePollingTaskStore } from '@/stores/device-maintenance/polling-task'
import { PollingTask } from '@/types/system/device-maintenance/polling-task'
import { ElMessage } from 'element-plus'
import { dataTypes } from '@/constants/device'

const pollingTaskStore = useDeviceMaintenancePollingTaskStore()

if (!pollingTaskStore.isLoad) {
  pollingTaskStore.loadAsync()
}

const taskName = ref('')
const deviceName = ref('')
const address = ref('')
const dataType = ref('')
const interval = ref(5000)
const enable = ref(true)
const published = ref(false)
const showAddItemDialog = ref(false)
watch(showAddItemDialog, (newValue) => {
  if (!newValue) {
    taskName.value = ''
    deviceName.value = ''
    address.value = ''
    dataType.value = ''
    interval.value = 5000
    enable.value = true
    published.value = false
  }
})

async function onAddPollingTask() {
  if (
    isNullOrEmpty(taskName.value) ||
    isNullOrEmpty(deviceName.value) ||
    isNullOrEmpty(address.value)
  ) {
    ElMessage.info('参数不能为空')
    return
  }

  if (interval.value < 200) {
    ElMessage.info('扫描周期不得小于200ms')
    return
  }

  const newTask = new PollingTask()
  newTask.taskName = taskName.value
  newTask.deviceName = deviceName.value
  newTask.dataType = dataType.value
  newTask.address = address.value
  newTask.interval = interval.value
  newTask.enable = enable.value
  newTask.published = published.value

  showAddItemDialog.value = false
  const result = await pollingTaskStore.insertPollingTaskAsync(newTask)

  if (result) {
    ElMessage.success('添加成功')
  } else {
    ElMessage.error('添加失败')
  }
}

function isNullOrEmpty(value: string) {
  return value == null || value == ''
}
</script>

<style scoped>
.table-content {
  padding: 0px 30px 20px;
}

.table-tools {
  padding: 30px 30px 0px;
  display: flex;
  justify-content: space-between;
}

.table-container {
  display: flex;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  height: 100%;
}

.main-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.search-container {
  padding: 30px 30px 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
</style>
